<template>
  <div>
    <div style="padding:10px ">
      <el-button type="success" @click="addBtn()"
        ><i class="el-icon-plus"></i><span>添加</span></el-button
      >
    </div>
    <generaltable
      :headerData="headerData"
      :tableData="tableData"
      :ispagination="false"
    >
      <template v-slot:icon="{ row }">
        <el-image :src="row.icon"></el-image>
      </template>
      <template v-slot:showIndex="{ row }">
        <el-switch
          v-model="row.showIndex"
          @change="changeShowIndex(row)"
        ></el-switch>
      </template>
      <template v-slot:banner="{ row }">
        <el-button @click="bannerManageBtn(row.id)"
          ><i class="el-icon-picture"></i><span>管理</span></el-button
        >
      </template>
      <template v-slot:attribute="{ row }">
        <el-button @click="attributeManageBtn(row.id)"
          ><i class="el-icon-picture"></i><span>管理</span></el-button
        >
      </template>
      <template v-slot:operation="{ row }">
        <el-button type="text" class="el-icon-edit" @click="editBtn(row)"
          ><span>修改</span></el-button
        >
        <el-button type="text" class="el-icon-delete" @click="deleteBtn(row)"
          ><span>删除</span></el-button
        >
      </template>
    </generaltable>
    <!-- attribute添加 -->
    <el-dialog
      :title="isAddAttribute ? '添加商品类别' : '编辑商品类别'"
      :visible.sync="addEditDialog"
      :before-close="cancelEvent"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="auto"
      >
        <el-form-item label="父级菜单" prop="upperMenu">
          <el-select v-model="ruleForm.upperMenu" clearable>
            <el-option
              v-for="(item, index) of upperMenuList"
              :key="index"
              :index="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            v-model="ruleForm.remarks"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="ruleForm.sort"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitBtn()">提交</el-button>
          <el-button @click="cancelEvent">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- Banner管理 -->
    <el-dialog
      title="Banner管理"
      :visible.sync="bannerDialog"
      :before-close="cancelEvent"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="管理" name="management">
          <el-button type="success" @click="bannerAdd()"
            ><i class="el-icon-plus"></i><span>添加</span></el-button
          >
          <generaltable
            :headerData="bannerHeaderData"
            :tableData="bannerTableData"
            :ispagination="false"
          >
            <template v-slot:idFile="{ row }">
              <el-image :src="row.idFile"></el-image>
            </template>
            <template v-slot:operation="{ row }">
              <el-button type="danger" @click="deleteBannerBtn(row.id)"
                >删除</el-button
              >
            </template>
          </generaltable>
        </el-tab-pane>
        <el-tab-pane label="预览" name="preview">
          <el-image v-for="item of bannerTableData" :key="item.id" :index="index" :src="item.url"></el-image>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 属性管理 -->
    <el-dialog
      title="属性管理"
      :visible.sync="attributeDialog"
      :before-close="cancelEvent"
    >
      <el-button type="success" @click="addAttribute()"
        ><i class="el-icon-plus"></i><span>添加</span></el-button
      >
      <generaltable
        :headerData="attributeHeaderData"
        :tableData="attributeTableData"
        :ispagination="false"
      >
        <template v-slot:operation="{ row }">
          <el-button
            type="primary"
            class="el-icon-edit"
            @click="attributeNameEditBtn(row)"
            ><span>编辑</span></el-button
          >
          <el-button
            type="primary"
            class="el-icon-edit"
            @click="attributevalueEditBtn(row.id)"
            ><span>编辑属性值</span></el-button
          >
          <el-button
            type="danger"
            class="el-icon-delete"
            @click="attributeDeleteBtn(row)"
            ><span>删除</span></el-button
          >
        </template>
      </generaltable>
    </el-dialog>
    <!-- 属性值编辑 -->
    <el-dialog title="属性值编辑" :visible.sync="attributeValueEditDialog">
      <el-button type="success" @click="attributeValueAddBtn"
        ><i class="el-icon-plus"></i><span>添加</span></el-button
      >
      <generaltable
        :headerData="attributeValueHeaderData"
        :tableData="attributeValueTableData"
        :ispagination="false"
      >
        <template v-slot:operation="{ row }">
          <el-button type="primary" @click="editAttributeValue(row)"
            >编辑</el-button
          >
          <el-button type="danger" @click="attributeValueDelete(row.id)"
            >删除</el-button
          >
        </template>
      </generaltable>
    </el-dialog>
  </div>
</template>
<script>
import {
  CommodityClassificationlist,
  changeHomePageShow,
  removeCategory,
  addCategory,
  bannerManageList,
  deleteBanner,
  attributeManageList,
  attributeDelete,
  attributeAdd,
  attributeValueList,
  attributeValueAdd,
  attributeValueRemove,
  attributeValueEdit,
  attributeNameEdit
} from "@/api/CommodityClassifications.js";
import generaltable from "@/components/generaltable.vue";
export default {
  name: "CommodityClassification",
  data() {
    return {
      addEditDialog: false,
      isAddAttribute: false,
      upperMenuList: [],
      bannerDialog: false,
      activeName: "management",
      categoryId: "",
      editAttributeValueId: "",
      attributeDialog: false,
      attributeValueEditDialog: false,
      ruleForm: {
        name: "",
        upperMenu: "",
        remarks: "",
        sort: ""
      },
      rules: {
        name: [],
        upperMenu: [],
        remarks: [],
        sort: []
      },
      headerData: [
        {
          prop: "name",
          label: "名称"
        },
        {
          prop: "icon",
          label: "图标",
          slot: true
        },
        {
          prop: "sort",
          label: "顺序"
        },
        {
          prop: "showIndex",
          label: "显示在首页",
          slot: true
        },
        {
          prop: "banner",
          label: "Banner管理",
          slot: true
        },
        {
          prop: "attribute",
          label: "属性管理",
          slot: true
        },
        {
          prop: "operation",
          label: "操作",
          slot: true
        }
      ],
      tableData: [],
      bannerHeaderData: [
        {
          prop: "title",
          label: "标题"
        },
        {
          prop: "url",
          label: "url"
        },
        {
          prop: "idFile",
          label: "图片",
          slot: true
        },
        {
          prop: "operation",
          label: "操作",
          slot: true
        }
      ],
      bannerTableData: [],
      attributeHeaderData: [
        {
          prop: "attrName",
          label: "属性名"
        },
        {
          prop: "operation",
          label: "操作",
          slot: true
        }
      ],
      attributeTableData: [],
      attributeValueHeaderData: [
        {
          prop: "attrVal",
          label: "属性值"
        },
        {
          prop: "operation",
          label: "操作",
          slot: true
        }
      ],
      attributeValueTableData: []
    };
  },
  mounted() {
    let _self = this;
    _self.obtainCommodityClassificationData();
  },
  methods: {
    // 获取数据
    async obtainCommodityClassificationData() {
      let _self = this;
      await CommodityClassificationlist().then(res => {
        if (res.code == 20000) {
          _self.tableData = [];
          _self.upperMenuList = [];
          for (let item of res.data) {
            item.icon =
              "http://localhost:9528/dev-api/file/getImgStream?idFile=" +
              item.icon;
            _self.tableData.push(item);
            _self.upperMenuList.push({ name: item.name, id: item.id });
          }
        };
        _self.aaa=true
      });
    },
    // 提交
    submitBtn() {
      let _self = this;
      let data = {
        name: _self.ruleForm.name,
        sort: _self.ruleForm.sort,
        descript: _self.ruleForm.remarks,
        pid: _self.ruleForm.upperMenu
      };
      addCategory(data).then(res => {
        if (res.code == 20000) {
          _self.addEditDialog = false;
          _self.$refs.ruleForm.resetFields();
          _self.obtainCommodityClassificationData();
        }
      }).catch(()=>{
          _self.$message({
            type:"error",
            message:"修改失败"
          })
      });
    },
    // 取消
    cancelEvent() {
      let _self = this;
      _self
        .$confirm("确定取消当前操作?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          if (_self.addEditDialog) {
            _self.addEditDialog = false;
          } else if (_self.bannerDialog) {
            _self.bannerDialog = false;
          } else if (_self.attributeDialog) {
            _self.attributeDialog = false;
          }
        })
        .catch(() => {});
    },
    // banner管理
    bannerManageBtn(id) {
      let _self = this;
      _self.categoryId = id;
      let data = {
        id: id
      };
      bannerManageList(data).then(res => {
        if (res.code == 20000) {
          _self.bannerTableData = [];
          for (let item of res.data) {
            _self.bannerTableData.push({
              title: item.title,
              id: item.id,
              url:"http://localhost:9528/dev-api/file/getImgStream?idFile="+item.idFile,
              idFile: "http://localhost:9528/dev-api/file/getImgStream?idFile="+item.idFile
            });
          }
          _self.bannerDialog = true;
        }
      });
    },
    // banner添加
    bannerAdd() {
      let _self = this;
      _self.$router.push({
        name: "BannerManagement",
        query: {
          idCategory: _self.categoryId
        }
      });
    },
    // banner删除
    deleteBannerBtn(id) {
      let _self = this;
      let data = {
        categoryId: _self.categoryId,
        BannerId: id
      };
      _self
        .$confirm("确认删除该条记录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          deleteBanner(data).then(res => {
            if (res.code == 20000) {
              _self.$message({
                type: "success",
                message: "删除成功!"
              });
              _self.bannerManageBtn(_self.categoryId);
            }
          });
        })
        .catch(() => {
          _self.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 属性管理/获取属性数据
    attributeManageBtn(id) {
      let _self = this;
      _self.categoryId = id;
      let data = {
        categoryId: id
      };
      attributeManageList(data).then(res => {
        if (res.code == 20000) {
          _self.attributeTableData = [];
          for (let item of res.data) {
            _self.attributeTableData.push({
              attrName: item.attrName,
              id: item.id,
              idCategory: item.idCategory
            });
          }
          _self.attributeDialog = true;
        }
      });
    },
    // 属性名添加
    addAttribute() {
      let _self = this;
      _self
        .$prompt("请输入属性名", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /\S/,
          inputErrorMessage: "请输入属性名"
        })
        .then(({ value }) => {
          let data = {
            attrName: value,
            idCategory: _self.categoryId
          };
          attributeAdd(data).then(res => {
            if ((res.code = 20000)) {
              _self.$message({
                type: "success",
                message: "添加成功"
              });
              _self.attributeManageBtn(_self.categoryId);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消添加"
          });
        });
    },
    // 属性名编辑
    attributeNameEditBtn() {
      let _self = this;
      _self
        .$prompt("请输入属性名", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputValue: row.attrVal,
          inputPattern: /\S/,
          inputErrorMessage: "请输入属性名"
        })
        .then(({ value }) => {
          let data = {
            id: row.id,
            attrName: value
          };
          attributeNameEdit(data).then(res => {
            _self.attributeManageBtn(_self.categoryId);
            _self.$message({
              type: "success",
              message: "编辑成功"
            });
          });
        })
        .catch(() => {
          _self.$message({
            message: "已取消编辑"
          });
        });
    },
    // 属性值管理
    attributevalueEditBtn(id) {
      let _self = this;
      _self.editAttributeValueId = id;
      _self.attributeValueEditDialog = true;
      let data = {
        idArrrKey: id
      };
      attributeValueList(data).then(res => {
        if (res.code == 20000) {
          _self.attributeValueTableData = [];
          for (let item of res.data) {
            _self.attributeValueTableData.push(item);
          }
        }
      });
    },
    // 属性值添加
    attributeValueAddBtn() {
      let _self = this;
      _self
        .$prompt("请输入属性名", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /\S/,
          inputErrorMessage: "请输入属性值"
        })
        .then(({ value }) => {
          let data = {
            attrVal: value,
            idAttrKey: _self.editAttributeValueId
          };
          console.log(data);
          attributeValueAdd(data).then(res => {
            _self.attributevalueEditBtn(_self.editAttributeValueId);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消添加"
          });
        });
    },
    // 属性值编辑
    editAttributeValue(row) {
      let _self = this;
      _self
        .$prompt("请输入属性值", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputValue: row.attrVal,
          inputPattern: /\S/,
          inputErrorMessage: "请输入属性值"
        })
        .then(async ({ value }) => {
          let data = {
            id: row.id,
            attrVal: value
          };
          await attributeValueEdit(data).then(res => {
            _self.attributevalueEditBtn(_self.editAttributeValueId);
            _self.$message({
              type: "success",
              message: "编辑成功"
            });
          });
        })
        .catch(() => {
          _self.$message({
            message: "已取消编辑"
          });
        });
    },
    // 属性值删除
    attributeValueDelete(id) {
      let _self = this;
      let data = {
        id: id
      };
      _self
        .$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          attributeValueRemove(data).then(res => {
            if (res.code == 20000) {
              _self.attributevalueEditBtn(_self.editAttributeValueId);
              _self.$message({
                type: "success",
                message: "删除成功"
              });
            }
          });
        })
        .catch(res => {
          _self.$message({
            type: "danger",
            message: ""
          });
        });
    },
    // 属性名删除
    attributeDeleteBtn(row) {
      let _self = this;
      let data = {
        id: row.id
      };
      attributeDelete(data)
        .then(res => {
          if (res.code == 20000) {
            _self.$message({
              type: "success",
              message: "删除成功！"
            });
            _self.attributeManageBtn(row.idCategory);
          }
        })
        .catch(() => {
          _self.$message({
            type: "success",
            message: "该数据存在关联数据，删除失败!"
          });
        });
    },
    // 首页显示
    changeShowIndex(row) {
      let _self = this;
      let data = {
        id: row.id,
        showIndex: row.showIndex
      };
      changeHomePageShow(data).then(res => {
        if (res.code === 20000) {
          _self.$message({
            type: "success",
            message: "操作成功"
          });
        }
      });
    },
    // 添加类别
    addBtn() {
      let _self = this;
      if (_self.ruleForm) {
        console.log(_self.ruleForm);
        _self.$refs.ruleForm.resetFields();
      }
      _self.addEditDialog = true;
      _self.isAddAttribute = true;
    },
    // 编辑类别
    editBtn(row) {
      console.log(row);
      let _self = this;
      _self.addEditDialog = true;
      _self.isAddAttribute = false;
      _self.$nextTick(() => {
        (_self.ruleForm.name = row.name),
          (_self.ruleForm.upperMenu = row.upperMenu),
          (_self.ruleForm.remarks = row.descript),
          (_self.ruleForm.sort = parseInt(row.sort));
      });
      console.log(_self.ruleForm);
    },
    // 删除类别
    deleteBtn(row) {
      let _self = this;
      let data = {
        id: row.id
      };
      _self
        .$confirm("确认删除该分类?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          removeCategory(data)
            .then(res => {
              if ((res.code = 20000)) {
                _self.$message({
                  type: "success",
                  message: "删除成功!"
                });
                _self.obtainCommodityClassificationData();
              }
            })
            .catch(res => {
              _self.$message({
                type: "success",
                message: "该数据存在关联数据，删除失败!"
              });
            });
        })
        .catch(() => {
          _self.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  components: {
    generaltable
  }
};
</script>
<style scoped></style>
